<template>
  <div class="layout-parent w100 p10">
    <el-tabs type="border-card">
      <el-tab-pane>
        <template #label><vp-label zh="基本信息" en="Basic Info" /></template>
        <AcModel type="view" ref="acModelRef"></AcModel>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted, nextTick } from "vue";
import request from '/@/utils/request';
import AcModel from './AcModel.vue';

export default defineComponent({
  name: "ViewAcmodel",
  props: {
    id: String,
  },
  components: {
    AcModel
  },
  emits: ["formSubmited"],
  setup(props, context) {
    const state = reactive({
      type: "view",
      loading: false,
      saveLoading: false,
      formData: {
        id: "",
      },
    });

    const editDialogRef = ref();
    const acModelRef = ref();

    const getData = (data: any) => {
      state.formData = data;
    };


    onMounted(() => {
      loadForm();
    });

    const loadForm = () => {
      state.loading = true;
      nextTick(() => {
        request.get(`/basicData/acmodel/${props.id}`).then((res) => {
          state.formData.id = res.data.id;
          acModelRef.value.setData({
            ...res.data
          });
          state.loading = false;
        })
      })
    };

    return {
      ...toRefs(state),
      ...toRefs(props),
      editDialogRef,
      acModelRef,
      getData,
    };
  },
});
</script>
